{% load static %}
<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script src="{% static 'js/jquery.min.js' %}"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<script type="text/javascript"
        src="https://api.map.baidu.com/api?v=2.0&ak=Koy1xZ0kphShm4Fwg9vW3VOe5oqkS3Vs&__ec_v__=20190126"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
{#       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>#}
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    myChart.showLoading();
    jobTypeData = null
    cityData = null
    window.onresize = function () {
        myChart.resize();
    }

    $.get('/avgWage', function (avgWage) {
        myChart.hideLoading();
        jobTypeData = avgWage;

        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    label: {
                        show: true
                    }
                }
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable: true,
            legend: {
                data: ['岗位平均工资', '城市平均工资'],
                selected: {
                    '岗位平均工资': true,
                    '城市平均工资': false
//                'Growth':false
                },
                itemGap: 5
            },
            grid: {
                top: '12%',
                left: '2%',
                right: '10%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: avgWage.names
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '平均工资(千)',
                    axisLabel: {
                        formatter: function (a) {
                            a = +a;
                            return isFinite(a)
                                ? echarts.format.addCommas(+a / 1)
                                : '';
                        }
                    }
                }
            ],
            dataZoom: [
                {
                    show: true,
                    start: 0,
                    end: 100
                },
                {
                    type: 'inside',
                    start: 94,
                    end: 100
                },
                {
                    show: true,
                    yAxisIndex: 0,
                    filterMode: 'empty',
                    width: 30,
                    height: '80%',
                    showDataShadow: false,
                    left: '93%'
                }
            ],
            series: [
                {
                    name: '岗位平均工资',
                    type: 'bar',
                    data: avgWage.AvgWage
                },
                {
                    name: '城市平均工资',
                    type: 'bar',
                    data: avgWage.AvgWage
                }
            ]
        };

        myChart.setOption(option);

        myChart.on('legendselectchanged', function (obj) {
            var selected = {};
            var category = "岗位";
            if (obj.name == "岗位平均工资") {
                selected["岗位平均工资"] = true;
                selected["城市平均工资"] = false;
                category = "岗位";

            } else if (obj.name == "城市平均工资") {
                selected["岗位平均工资"] = false;
                selected["城市平均工资"] = true;
                category = "城市";
            }

            if (category == "岗位") {
                if (jobTypeData != null && typeof jobTypeData == "object") {
                    option.series[0].data = jobTypeData.AvgWage;
                    option.series[1].data = jobTypeData.AvgWage;
                    option.xAxis[0].data = jobTypeData.names;
                    option.legend.selected = selected;
                    this.setOption(option)
                    return;
                }
            } else if (category == "城市") {
                if (cityData != null && typeof cityData == "object") {
                    option.series[0].data = cityData.AvgWage;
                    option.series[1].data = cityData.AvgWage;
                    option.xAxis[0].data = cityData.names;
                    option.legend.selected = selected;
                    this.setOption(option)
                    return;
                }
            }

            $.ajax({
                async: false,    //表示请求是否异步处理
                type: "get",    //请求类型
                url: "/avgWage",//请求的 URL地址
                dataType: "json",//返回的数据类型
                data: {"category": category},
                success: function (datas) {

                    option.series[0].data = datas.AvgWage;
                    option.series[1].data = datas.AvgWage;
                    option.xAxis[0].data = datas.names;
                    if (category == "城市") {
                        cityData = datas;
                    }
                },
                error: function (data) {

                }
            });

            option.legend.selected = selected;
            this.setOption(option)

        });


    });
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
</body>
</html>